<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>yuanliu</title>
    <meta http-equiv="Content-Security-Policy" content="*">
 
    <style>
        html,
        body {
            height: 100%;
        }
        
        #app {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        
        .nav_bar {
            height: 100%;
        }
        
        .dark {
            background: #000;
        }
        
        .light {
            background: #fff;
        }
        
        #loadding {
            height: 100%;
            width: 100%;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #loadding_a {
            animation: loadding_a 2s;
            position: relative;
            animation-iteration-count: infinite;
        }
        
        @keyframes loadding_a {
            0% {
                top: -20px;
                opacity: 0;
            }
            70% {
                top: 0px;
                opacity: 0.9;
            }
            100% {
                top: 20px;
                opacity: 0;
            }
        }
        
        @keyframes pageDownTap {
            0% {
                bottom: 20px;
                opacity: 0;
            }
            70% {
                bottom: 15px;
                opacity: 0.9;
            }
            100% {
                bottom: 10px;
                opacity: 0;
            }
        }
        
        #app_menu{
            position: fixed;
            left: 10px;
            top: 10px;
            z-index: 999;
            cursor: pointer;
            display: none;

        }
        #app_menu i{
            font-size: 16px;
        }
        [nav-model="1"] #app_menu{
            display: block;
        }
        #navBar{
            z-index: 1;
        }
    </style>

</head>

<body>
    <div id="loadding">
        <div id="loadding_a">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
              </svg>
        </div>
    </div>
  
    <div id="app">
        <div id="app_menu">
            <i class="bi bi-list"></i><span style="font-size: 13px;">&nbsp;&nbsp;导航</span>
        </div>
        <canvas id="page_bg" class="page_bg"></canvas>
        <div id="titleBar"></div>
        <div style="display: flex;">
            <div id="navBar">
            </div>
            <div id="pageView" style="flex: 1;"></div>
        </div>
    </div>
    <link href="./css/index.css" rel="stylesheet">
    <link href="./css/theme.css" rel="stylesheet">
    <link href="./css/bootstrap-icons.css" rel="stylesheet">
    <script defer src="./js/echarts.js"></script>
    <script defer src="./js/FileSaver.js"></script>
    <script defer src="./js/xlsx.full.min.js"></script>
    <script defer src="./js/echartTheme.js"></script>
    <script defer src="./js/dom-to-image.min.js"></script>
    <script defer src="./js/babylon.js"></script>
    <script defer src="./js/babylonjs.loaders.js"></script>
    <script defer src="./js/babylon.glTF2FileLoader.js"></script>
    <script defer src="./js/index.js"></script>
</body>

</html>